05148-180531 flickrのScrapboxリンクを取得するブックマークレットを書きました
https://flic.kr/p/26Cypzf https://farm2.staticflickr.com/1756/41764193124_c22fbfe886_k.jpg
これでとうとう、iPhone/iPadオンリーでScrapboxにブログを書く工程が完結します。従来も記事本文はiPhone/iPadブログで書いていましたが、flickrから写真を貼る作業だけはMacの方がはるかに手順が少ないため、iPhone/iPadでは行わず、いつもMacでエディタを介して行なっていました。今後はMac/iPhone/iPadのどれでも1台だけで、写真をflickrからScrapboxに楽々貼れます。flickrで写真のページを開いて共有ボタンからBBCodeを開き、今回作成したブックマークを押すだけ。 作成したコードはこれ。
code:js
var global=window;
global.COPY_TO_CLIPBOARD=global.COPY_TO_CLIPBOARD||{};
global.COPY_TO_CLIPBOARD.copyToClipboard=function(){
var x=document.getElementsByClassName('bb-code-text-field')
var a=document.createElement("textarea");
s=s.replace('[url=', '[[')
s=s.replace(/]].*/, ']]\n')
a.textContent=s;
var b=document.getElementsByTagName("body")0; b.appendChild(a);
a.contentEditable=!0;
a.readOnly=!1;
a.setSelectionRange(0,999999);
document.execCommand("copy");
b.removeChild(a)
};
global.COPY_TO_CLIPBOARD.copyToClipboard();
上記のコードをブックマークレットとして使えるようURLエンコードしたものがこれ。
code:js
javascript:var%20global%3Dwindow%3B%0D%0A%20global.COPY_TO_CLIPBOARD%3Dglobal.COPY_TO_CLIPBOARD%7C%7C%7B%7D%3B%0D%0A%20global.COPY_TO_CLIPBOARD.copyToClipboard%3Dfunction()%7B%0D%0A%20%20%20%20var%20x%3Ddocument.getElementsByClassName('bb-code-text-field')%0D%0A%20%20%20%20var%20a%3Ddocument.createElement(%22textarea%22)%3B%0D%0A%20%20%20%20var%20s%3Dx%5B0%5D.value%0D%0A%20%20%20%20s%3Ds.replace('%5D%5Bimg%5D'%2C%20'%20')%0D%0A%20%20%20%20s%3Ds.replace('%5B%2Furl%5D%20by%20%5Burl%3Dhttps%3A%2F%2Fwww.flickr.com%2Fphotos%2Fshio%2F%5DKazuhiro%20Shiozawa%5B%2Furl%5D%2C%20on%20Flickr'%2C%20'')%0D%0A%20%20%20%20s%3Ds.replace('jpg%5B%2Fimg%5D%5B%2Furl%5D%5Burl%3Dhttps%3A%2F%2Fflic.kr%2Fp%2F'%2C%20'jpg%5D%5D')%0D%0A%20%20%20%20s%3Ds.replace('%5Burl%3D'%2C%20'%5B%5B')%0D%0A%20%20%20%20s%3Ds.replace(%2F%5D%5D.*%2F%2C%20'%5D%5D%5Cn')%0D%0A%20%20%20%20a.textContent%3Ds%3B%0D%0A%20%20%20%20var%20b%3Ddocument.getElementsByTagName(%22body%22)%5B0%5D%3B%0D%0A%20%20%20%20b.appendChild(a)%3B%0D%0A%20%20%20%20a.contentEditable%3D!0%3B%0D%0A%20%20%20%20a.readOnly%3D!1%3B%0D%0A%20%20%20%20a.setSelectionRange(0%2C999999)%3B%0D%0A%20%20%20%20document.execCommand(%22copy%22)%3B%0D%0A%20%20%20%20b.removeChild(a)%0D%0A%20%20%7D%3B%0D%0A%20global.COPY_TO_CLIPBOARD.copyToClipboard()%3B
このコードはshio.icon専用ですが、他の方も「shio%2F%5DKazuhiro%20Shiozawa」の部分にある「shio」、「Kazuhiro」、「Shiozawa」の3か所をご自身のflickrのURLに変更すれば流用できるはずです。Mac/iPhone/iPadのSafariで使えます。「ブックマークレット」は下記の手順で設定します。 1. 上記コードの「javascript:var」から「)%3B」までをコピーしてメモアプリなどにペイストする。
2. 「shio%2F%5DKazuhiro%20Shiozawa」のうち「shio」、「Kazuhiro」、「Shiozawa」の部分をご自身のflickrページのURLに変更する。
3. 全文をコピーする。
4. どこでもいいので適当なwebページをSafariで開いて「ブックマーク」メニュから「ブックマークに追加」する。
5. 「ブックマーク」メニュから「ブックマークを編集」を開いて、「お気に入り」リストの中にある4.で追加した行を1回クリックして選択する（もしその行が「お気に入り」リストの下の方にあるなら、リストのできるだけ上の方にドラッグする）。
5. そのブックマークの行が選択された状態で、tabキーを1回押し、適当な名称に変更する（shio.iconの場合は「flickrCode」としました）。
6. tabキーをもう1回押して、アドレス欄に3.でコピーしたコードをペイストする。
7. ブックマーク編集画面を閉じる。
以上です。
https://flic.kr/p/27Jpn7F https://farm2.staticflickr.com/1736/42486684591_1be4698282_k.jpg
使い方は単純。
1. flickrで写真のページを開く。
2. 写真の右下右から3つ目にある「Share Photo」ボタンを押す
3. 表示される「Share 1 Photo to:」で「BBCode」を押す
https://gyazo.com/6f3d8cc5032355fbeb1ecc1379701e0a
4. 必要なサイズを選択する（shio.iconは「Large 2048 × 2048」を使っています）
5. 画面上部の「お気に入りバー」にある先ほど登録したブックマークレット「flickrCode」をワンクリック（何も反応はありません）
6. Scrapboxでペイスト（command+v）
すると、1.の写真が貼られ、その写真を2回クリックすると1.のflickrページに飛ぶはずです。なお3.と4. は初回のみ必要で、2度目以降は自動的に「BBCode」とサイズが選択されています。本当はこの工程の2.も自動化したいのですが、まだできていません。
https://flic.kr/p/27JpnVe https://farm2.staticflickr.com/1722/42486687291_e86fe87977_k.jpg
これができるまでの経緯を書きましょう。
従来は下記の手順で写真を貼っていました。
1. flickrの写真ページからBBCodeをコピーして、Macのエディタ「Jedit Ω」にペイスト。それを記事で使う写真すべてで繰り返し、JeditΩ上にBBCodeがずらっと並んだ状態にする。 2. Jedit Ωの「検索」ウィンドウの「複数一括置換」で、あらかじめ、下記の手順を書いておく。その時「正規表現」のチェックを外しておく。
https://gyazo.com/16df5bb7bf876930dd7268f716564100
3. 生成された文字列すべてをコピーしてScrapboxにペイスト
4. すると、1.で選択したすべての写真がflickrへのリンク付きでずらりと貼り付けられる。
5. Scrapbox上で各写真の行にカーソルを置いて、control+↑・↓で、あらかじめ書いてある本文の間に挿入。
6. 残存する余計な文字列を選択して削除
この手順でflickrの写真をScrapboxのブログに貼っておりました。この手順にはエディタ（shio.iconの場合はJedit Ω）が不可欠なので、同じことはiPhone/iPadではできません。またできればMacでもエディタを使わずに直接リンクを貼り付けることができれば直截（「ちょくせつ」と読みます）です。
そんな懸案を、「民法2」の授業の後、コーヒーを飲みながら、西尾泰和さん(@nishio)に話しました。彼は「2002年度「未踏ユース スーパークリエーター」に認定されているエンジニア（プログラマ）で、社会人でありながら今期、shio.icon担当の「民法2」の授業に正規の「聴講生」として毎週参加しています。民法の内容とshio.iconの教え方の両方を楽しんでくださってshio.iconも嬉しい。 まず、西尾さんに、下記のブックマークレットをご覧いただきました。
すると、「このコードを元にしてshio.icon先生の懸案を解決できそうですよ。書いてみませんか？」とおっしゃる。それはうれしい。ぜひトライしたい!!
そこで成蹊大学のこみちカフェにて、横に座った西尾さんから少しずつヒントをいただきながら、コードを書いていくことにしました。プログラミングといえば中学生の頃、SHARPのポケットコンピュータにBASICで書いた以来、Scrapboxに設定するUser CSSやUser Scriptを他の方からいただきつつ自分用に補正するくらいしかやっていません。そんなshio.iconに果たして書けるのでしょうか。
Google Chromeでflickrの写真のページを開いてデベロッパツールでBBCodeのclassを取得
javascriptの置換コード「replace」の使い方をJavaScript | MDNで学び、それを利用して、藤坂さんのコードを基礎に、JeditΩに書いたのと同じ置換をコーディング 正規表現を「/ /」で囲み、任意の文字を表す「.」を繰り返す「*」を使ってファイル名の削除をコーディング
1行ごとにGoogle Chromeのデベロッパツールでconsole.logして、作動が確認できたらコードに追記
すべて書きあがったら動作を確認。
実際に動くか検証して完了。
そんな手順です。最後の最後でなぜかうまく作動しなくて悩みましたが、改行コードを置換文字列に入れ忘れていたことに気づいてようやく完成。
https://flic.kr/p/27FNrLy https://farm2.staticflickr.com/1732/42457238332_4621d6553e_k.jpg
プログラムとは「手順書」。プログラミングとは「手順の言語化」。
だからプログラミングは最高に楽しい。書いたものをその場で動かして、手順どおりに動くかその場で検証できる。結果が出る。その繰り返し。
ご指導くださった西尾さん、そして基礎となったコードを書いたくださった藤坂さんに心より感謝申し上げます。どうもありがとうございました。
〈写真は西尾さんと食べたゴブランのランチをGR IIで〉 https://flic.kr/p/27JpoUi https://farm1.staticflickr.com/873/42486690601_d57d5eaf77_k.jpg